Computer images are often resized, such as while a user is editing an image directly or resizing a document (e.g., a web page) containing one or more visual elements and/or if a visual element is to be rendered by an application that operates on different platforms having differing amounts of available screen space. For example, a vector or raster image may be divided into “slices,” with each slice corresponding to a respective portion of the image. Depending on the properties of each slice, different portions of the image will behave differently when the image is resized. Typically, slices are defined by user input defining boundaries between the slices.
In particular, a shape such as a rectangle may be divided into three slices, with two end slices and a middle slice. If the rectangle is expanded horizontally, the end slices may retain their proportions while the pixels of the middle slice are stretched, repeated, or otherwise manipulated to fill the middle area as it expands. A similar approach may be used for vertical expansions, with three slices corresponding to the top, bottom, and middle of the rectangle, with the top and bottom slices retaining their proportions. Nine slices may facilitate both horizontal and vertical expansion—four corner slices retain their proportions, top and bottom slices stretch or repeat horizontally, end slices repeat or stretch vertically, while a center slice is repeated both horizontally and vertically. These and other slicing strategies may be used in applications that are used to edit images, but can also be used to present resizable components in applications, web pages, and the like.